<template>
    <f7-page>
        <f7-navbar>
            <f7-nav-left>
                <f7-link @click="back">
                    <f7-icon icon="icon-back"></f7-icon>
                </f7-link>
            </f7-nav-left>
            <f7-nav-title title="修改密码"></f7-nav-title>
        </f7-navbar>
        <div class="my-view">
            <f7-block>
                <f7-list no-hairlines style="margin-top: 30px;">
                    <f7-list-input type="password" placeholder="原密码"  label="原密码"
                              minlength="6" error-message="请正确输入原密码！" clear-button floating-label outline
                              @change="oldPassword = $event.target.value" :vaule="oldPassword">
                        <f7-icon f7="lock" slot="media"></f7-icon>
                    </f7-list-input>
                    <f7-list-input type="password" placeholder="新密码" label="新密码"
                              minlength="6" error-message="请正确输入新密码！" clear-button floating-label outline
                              @change="password = $event.target.value"
                              :vaule="password">
                        <f7-icon f7="lock" slot="media"></f7-icon>
                    </f7-list-input>
                    <f7-list-input type="password" placeholder="确认新密码" label="确认新密码"
                                   minlength="6" error-message="确认新密码输入错误" clear-button floating-label outline
                                   @change="ensurePassword = $event.target.value"
                                   :vaule="ensurePassword">
                        <f7-icon f7="lock" slot="media"></f7-icon>
                    </f7-list-input>
                </f7-list>
            </f7-block>
            <f7-block>
                <f7-row>
                    <f7-col>
                        <f7-button @click="userChangePasswordSubmit" big raised round>确认修改</f7-button>
                    </f7-col>
                </f7-row>
            </f7-block>
        </div>
    </f7-page>
</template>

<script>
    import back from '@/mixins/back.js';
    import request from '@/utils/request.js';
    import { getUser, setUser, clearUser} from '@/utils/auth';
    import { getStore, setStore, clearStore } from '@/utils/storage';
    import keys from '@/utils/rememberKeys';
    export default {
        mixins: [back],
        name: "resetPassword",
        data: function() {
            return {
                oldPassword:'',
                password:'',
                ensurePassword:'',
            }
        },
        methods: {
            userChangePasswordSubmit: function() {
                var self = this;
                if(self.oldPassword.length < 6 ) {
                    self.$f7.dialog.alert('请输入正确的密码！');
                }else if(self.password.length < 6 ) {
                    self.$f7.dialog.alert('密码长度过短！');
                }else if (self.ensurePassword != self.password)  {
                    self.$f7.dialog.alert('确认密码不一致！');
                }else{
                    self.$f7.dialog.confirm("您确定要修改密码吗？", "", function () {
                        request({
                            url: '/api/user/mobileChangePassword',
                            method: 'post',
                            params: {
                                userId: getUser().userId,
                                oldPassword: self.oldPassword,
                                password: self.password
                            }
                        }).then(data =>{
                            self.$f7.dialog.alert('密码修改成功！新密码为' + self.password);
                            self.$f7router.navigate('/Settings/');
                        }).catch(data => {
                            self.$f7.dialog.alert(data.detail.msg || '修改密码异常！');
                        });
                    });
                }

            }
        }
    }
</script>

<style scoped>
    .my-view{
        background-color: white;
        margin: 20px 10px;
        padding-bottom: 20px;
        padding-top: 20px;
        border-radius: 20px;
        box-shadow: #dfdfe0 0px 0px 10px 1px;
    }
</style>